<template>
  <!-- 打印区域容器 -->
    <div class="main">
        <!-- 面包屑 -->
        <div class="top">
            <el-page-header @back="goBack">
                <template #content>
                <span class="text-large font-600 mr-3">  活动展示  </span>
                </template>
            </el-page-header>
        </div>
        <el-card :body-style="{ padding: '50px', width: '40vw' }" class="input_box">
            <!-- <img
            src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
            class="image"
            /> -->
            <el-form :model="form" size="large"  id="printBox">
                <el-form-item label="活动名称:" :label-width="formLabelWidth" class="paperview-input-text">
                    <!-- <input :disabled='disabled' v-model="activeForm.name" autocomplete="off" :class="disabled?'INPUT':'INPUT2'"/> -->
                    <div  :class="disabled?'input2':'input'" :contenteditable='disabled' onkeydown="myFunction()">{{ activeForm.name }}</div>
                </el-form-item>
                <el-form-item label="活动时间:" :label-width="formLabelWidth" >
                    <!-- <input :disabled='disabled' v-model="activeForm.time" autocomplete="off" :class="disabled?'INPUT':'INPUT2'"/> -->
                    <div :class="disabled?'input2':'input'" :contenteditable='disabled' onkeydown="myFunction()">{{ activeForm.time }}</div>
                </el-form-item>
                <el-form-item label="活动地点:" :label-width="formLabelWidth">
                    <!-- <input :disabled='disabled' v-model="activeForm.place" autocomplete="off" :class="disabled?'INPUT':'INPUT2'"/> -->
                    <div :class="disabled?'input2':'input'" :contenteditable='disabled' onkeydown="myFunction()">{{ activeForm.place }}</div>
                </el-form-item>
                <el-form-item label="活动对象:" :label-width="formLabelWidth">
                    <!-- <input :disabled='disabled' v-model="activeForm.people" autocomplete="off" :class="disabled?'INPUT':'INPUT2'"/> -->
                    <div :class="disabled?'input2':'input'" :contenteditable='disabled' onkeydown="myFunction()">{{ activeForm.people }}</div>
                </el-form-item>
                <el-form-item label="活动海报:" :label-width="formLabelWidth">
                  <div class="demo-image__preview">
                    <el-image
                    style="width: 200px; height: 200px"
                    :src="activeForm.image[0].url"
                    :zoom-rate="1.2"
                    :preview-src-list="fileList || []"
                    fit="cover"
                    />
                  </div>
                </el-form-item>
            </el-form>
            <div style="padding: 14px">
            <div class="bottom">
                <time class="time">{{ currentDate }}</time>
                <el-button text class="button" @click="edit" ref="edit"> {{ Text }} </el-button>
            </div>
            <div style="display: flex; align-items: center">
            <el-popover placement="right" :width="550" trigger="click">
            <template #reference>
              <span style="font-weight: 700;cursor: pointer;">查看已经创建的活动</span>
            </template>
              <el-table :data="alFileList">
                <el-table-column width="200" property="name" label="name" />
                <el-table-column width="200" property="time" label="time"/>
                <el-table-column width="300" property="address" label="address" />
                <el-table-column width="300" property="people" label="people" />
                <el-table-column width="300" property="image" label="image" />
                <el-table-column fixed="right" label="删除">
                  <template #default="scope">
                    <el-button size="small" type="primary" link @click="handlClick(scope.row)"
                      >选择填入</el-button
                    >
                    <el-button link type="primary" size="small" @click="handleDelete(scope.row)"
                      >删除</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
            </el-popover>
            </div>
            <!-- 按钮绑定打印 -->
            <el-button link type="primary" size="small" v-print="print" style="margin-top: 30px;">点击打开打印预览</el-button>
            </div>
        </el-card>
    </div>
</template>

<script>
import { computed, onMounted, ref } from 'vue'
import { useStore } from 'vuex'
import * as dayjs from 'dayjs'
import { useRouter } from 'vue-router'
export default {
  name: 'showResult',
  setup (props) {
    // 打印的配置项
    const print = ref({
      id: 'printBox', // 这里的id就是上面我们的打印区域id，实现指哪打哪
      popTitle: '兰亭书苑-活动展示', // 打印配置页上方的标题
      extraHead: '', // 最上方的头部文字，附加在head标签上的额外标签，使用逗号分割
      preview: false, // 是否启动预览模式，默认是false
      previewTitle: '活动展示', // 打印预览的标题
      previewPrintBtnLabel: '预览结束，开始打印', // 打印预览的标题下方的按钮文本，点击可进入打印
      zIndex: 20002, // 预览窗口的z-index，默认是20002，最好比默认值更高
      previewBeforeOpenCallback () { console.log('正在加载预览窗口！') }, // 预览窗口打开之前的callback
      previewOpenCallback () { console.log('已经加载完预览窗口，预览打开了！') }, // 预览窗口打开时的callback
      beforeOpenCallback () { console.log('开始打印之前！') }, // 开始打印之前的callback
      openCallback () { console.log('执行打印了！') }, // 调用打印时的callback
      closeCallback () { console.log('关闭了打印工具！') }, // 关闭打印的callback(无法区分确认or取消)
      clickMounted () { console.log('点击v-print绑定的按钮了！') }

    })
    onMounted(() => {
      // console.log(activeForm)

    })
    function myFunction () {
      if (window.event && window.event.keyCode === 13) {
        window.event.returnValue = false
      }
    }
    const disabled = ref(false)
    const Text = ref('编辑')
    const store = useStore()
    const router = useRouter()
    // input 内容
    const activeForm = computed(() => {
      return store.state.lanting.form || {}
    })
    const fileList = computed(() => {
      return [`${store.state.lanting.form.image[0].url}`]
    })
    // 删除
    function handleDelete (row) {
      store.commit('lanting/UPDATAArr', row.name)
    }
    // 替换展示类容
    function handlClick (e) {
      // console.log(activeForm.value)
      store.commit('lanting/UPDATEFORM', e)
    }
    // table内容
    const alFileList = computed(() => {
      const gridData = []
      // console.log(store.state.lanting.arr)
      store.state.lanting.arr.forEach((item, index) => {
        const gridDataList = {}
        gridDataList.name = item.name
        gridDataList.time = item.time
        gridDataList.address = item.place
        gridDataList.people = item.people
        gridDataList.image = item.image[0].url
        gridData.push(gridDataList)
      })
      // console.log(store.state.lanting.arr[0].image[0].url)
      // console.log(store.state.lanting.arr)
      return gridData
    })
    const currentDate = ref(dayjs().format('YYYY/MM/DD-dddd-HH:mm'))
    function edit () {
      // console.log(activeForm.value)
      disabled.value = !disabled.value
      if (disabled.value !== false) {
        Text.value = '确定'
      } else {
        Text.value = '编辑'
      }
    }
    function goBack () {
      router.go(-1)
    }
    return { activeForm, currentDate, disabled, edit, Text, goBack, fileList, alFileList, handleDelete, handlClick, print, myFunction }
  }
}
</script>

<style scoped lang='less'>
.top{
    margin: 0 0 750px 0;
}
.main{
    display: flex;
    justify-content: center;
    align-items: center;
    .input_box{
      .input{
        height: 35px;
        line-height: 35px;
        width: 350px;
        font-size: 16px;
        color: #555;
        font-weight: 600;
        background-color: #fff;
        background-image: none;
        outline: none;
        overflow: hidden;
        white-space: nowrap;
        display: block;
        cursor: auto ;
      }
      .input2{
        border: 0; // 去除未选中状态边框
        outline: none; // 去除选中状态边框
        background-color: rgba(0, 0, 0, 0);// 透明背景
        line-height: 35px;
        height: 35px;
        width: 350px;
        font-size: 16px;
        color: rgb(176, 176, 176);
        font-weight: 600;
    }
      .input:empty::before{
        color:#ADADAD;
        content:attr(placeholder);
        font-size: 14px;
      }
      .input:focus{
        // border: 0; // 去除未选中状态边框
        // outline: none; // 去除选中状态边框
        // background-color: rgba(0, 0, 0, 0);// 透明背景
        // height: 35px;
        // width: 350px;
        // font-size: 16px;
        // color: rgb(176, 176, 176);
        // font-weight: 600;
        // cursor: auto ;
      }
    }
}
.time {
  font-size: 12px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.button {
  padding: 0;
  min-height: auto;
}

.image {
  width: 100%;
  display: block;
}
.demo-image__error .image-slot {
  font-size: 30px;
}
.demo-image__error .image-slot .el-icon {
  font-size: 30px;
}
.demo-image__error .el-image {
  width: 100%;
  height: 200px;
}
</style>
